<template>
  <div class="whole">
    <div class="thirds">
      <span class="wholeSpan">第三方应用</span>
      <div class="third">
        <div class="third_" v-for="(item, index) in thirdInfo" :key="index">
          <div class="img" @click="skip(item.path)">
            <img :src="imgUrl+item.icon" alt />
          </div>
          <div class="text">
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../../api/third/third.js";
export default {
  data() {
    return {
      imgUrl: "",
      thirdInfo: {}
    };
  },
  created() {
    this.imgUrl = this.$config.imgUrl;
    this.getThirdInfo();
  },
  methods: {
    getThirdInfo() {
      let _this = this;
      api.thirdList().then(res => {
        if (res.code == 200) {
          _this.thirdInfo = res.data.data;
        }
      });
    },
    skip(path) {
      window.open(path);
    }
  }
};
</script>

<style lang="scss" scoped>
.whole {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  .thirds {
    width: 84%;
    height: 100%;
    display: flex;
    .wholeSpan {
      font-size: 18px;
      color: #4d4d4d;
      line-height: 50px;
      padding-left: 31px;
    }
    .third {
      width: 1100px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      overflow-x: hidden;
      overflow-y: scroll;
      text-align: center;
      .third_ {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        margin-left: 20px;
        padding: 0 56px;
        padding-bottom: 40px;
        .img {
          cursor: pointer;
          width: 120px;
          height: 120px;
          border-radius: 20px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          margin-top: 30px;
          font-size: 18px;
          color: #4d4d4d;
        }
      }
    }
  }

  .third::-webkit-scrollbar {
    display: none;
  }
}
</style>